<template>
  <div>
    <div class="recommend-title">周末去哪</div>
    <div class="info" v-for="item in list" :key="item.id">
      <div class="item-img">
        <img :src="item.imgUrl" alt>
      </div>
      <div class="info-content">
        <div class="info-title">{{ item.title }}</div>
        <div class="info-introduce">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['list'],
  data() {
    return {

    };
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.recommend-title {
  text-indent: 0.2rem;
  background-color: #eee;
  line-height: 0.8rem;
}

.info {
  .item-img {
    overflow: hidden;
    height: 0;
    padding-bottom: 37.09%;

    img {
      width: 100%;
    }
  }

  .info-content {
    padding: 0.1rem;

    .info-title {
      font-size: 0.32rem;
      line-height: 0.54rem;
      ellipsis();
    }

    .info-introduce {
      line-height: 0.4rem;
      color: #ccc;
      ellipsis();
    }
  }
}
</style>